import React, { useEffect, useState } from 'react'
import * as Action from "../../../actions/index"
import { useDispatch, useSelector } from "react-redux"
import request from "../../../api/request";
import { ALLSTATE, ITEMTYPE } from "../../../types/store.d"
import { Sidebar, SidebarItem, Toast, NavBar, Grid, Image } from 'react-vant';
import { useNavigate } from "react-router-dom"
import "../../../api/data"
function Classify() {
  const [active, setActive] = useState(0);
  const [arr,setArr]=useState<Array<ITEMTYPE>>([])
  const navigate = useNavigate();
  const dispatch = useDispatch();
  useEffect(() => {
    request.get("/api/classify").then(res => {
      dispatch(Action.get_classify(res.data.classify))
    })
  }, [])
  const classifyArr = useSelector((state: ALLSTATE) => {
    return state.classifyArr
  })
  const rightArr = useSelector((state: ALLSTATE) => {
    return state.rightArr
  })
  const changeIndex = (v: number) => {
    setActive(v)
    dispatch(Action.save_index(v))
  }
  return (
    <div>
      <NavBar
        title="标题"
        leftText="返回"
        onClickLeft={() => navigate("/")}
        // rightText={<Search fontSize={20} />}
        onClickRight={() => Toast('按钮')}
      />

     <main style={{display:"flex"}}>
     <Sidebar
        value={active}
        onChange={(v) => changeIndex(v)}
      >
        {
          classifyArr.map((item, index) => {
            return <Sidebar.Item title={item.name} key={index} />
          })
        }
      </Sidebar>
      <Grid border={false} columnNum={2}>
        {
          rightArr.map((item, index) => {
            return <Grid.Item key={index}>
              <Image src={item.img} />
              <p>{item.title}</p>
            </Grid.Item>
          })
        }

      </Grid>
     </main>
    </div>
  )
}

export default Classify